<template>
  <a-form :form="form" slot="detail">
    <a-row>
      <a-col :span="24">
        <a-form-item label="薪资项" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-tree-select
            v-decorator="['fieldParent',{ rules: [
              {
                required: true,
                message: '请选择薪资项',
              },
            ],}]"
            treeNodeFilterProp="title"
            show-search
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            allow-clear
            tree-default-expand-all

          >
            <a-tree-select-node :key="item.id" :value="item.id" :title="item.fieldName" v-for="item in salaryData" :disabled="disabledItem.id===item.id||disabledItem.fieldParent===item.id"></a-tree-select-node>
          </a-tree-select>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
  import { getAction } from '@/api/manage'
  export default {
    name: 'SalaryMoveForm',
    components: {},
    props: { 'initData': { type: Object } },
    data () {
      return {
        disabledItem: this.initData,
        form: this.$form.createForm(this),
        model: {},
        salaryData: [],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        validatorRules: {
        }
      }
    },
    computed: {},
    created () {
      this.getList()
      console.log('initData', this.initData)
    },
    methods: {
      getList() {
        getAction('/salary/salaryFields/queryList').then((res) => {
          if (res.code === 200) {
            this.salaryData = res.result
          }
        })
      },
      submitForm () {
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            this.$emit('ok', values)
          }
        })
      }
    }
  }
</script>
